<template>
	<!-- 组件配置 -->
	<setting-item-box :itemRightStyle="{ gridTemplateColumns: '6fr 2fr' }" style="padding-right: 25px">
		<template #name>
			地址
			<n-tooltip trigger="hover">
				<template #trigger>
					<n-icon size="18" :depth="3">
						<HelpCircleOutline />
					</n-icon>
				</template>
				<ul class="go-pl-0">
					开发环境使用 mock 数据
					<li v-for="item in apiList" :key="item.value">
						<n-text type="info"> {{ item.value }} </n-text>
					</li>
				</ul>
			</n-tooltip>
		</template>
		<setting-item name="请求方式 & URL 地址">
			<n-input-group>
				<n-select class="select-type-options" v-model:value="requestHttpType" :options="selectTypeOptions" />
				<n-input v-model:value.trim="requestUrl" :min="1" placeholder="请输入地址"> </n-input>
			</n-input-group>
			<!-- 组件url -->
		</setting-item>
		<setting-item name="更新间隔">
			<n-input-group>
				<n-input-number
					v-model:value.trim="requestInterval"
					class="select-time-number"
					min="0"
					:show-button="false"
					placeholder="默认使用全局数据"
				/>
				<!-- 单位 -->
				<n-select class="select-time-options" v-model:value="requestIntervalUnit" :options="selectTimeOptions" />
			</n-input-group>
		</setting-item>
	</setting-item-box>
	<setting-item-box name="选择方式" alone class="go-mt-0">
		<request-header :targetDataRequest="targetDataRequest"></request-header>
	</setting-item-box>
</template>

<script setup>
import RequestHeader from '../RequestHeader/index.vue';

const props = defineProps({
		targetDataRequest: Object
	}),
	{ requestInterval, requestIntervalUnit, requestHttpType, requestUrl } = toRefs(props.targetDataRequest);

const selectTypeOptions = [
		{ label: 'get', value: 'get' },
		{ label: 'post', value: 'post' },
		{ label: 'patch', value: 'patch' },
		{ label: 'put', value: 'put' },
		{ label: 'delete', value: 'delete' }
	],
	selectTimeOptions = [
		{ label: '秒', value: '秒' },
		{ label: '分', value: '分' },
		{ label: '时', value: '时' },
		{ label: '天', value: '天' }
	],
	apiList = [{ value: `【图表】/mock/chartData` }];
</script>

<style lang="scss" scoped>
.select-time-number {
	width: 100%;
}
.select-time-options {
	width: 100px;
}
.select-type-options {
	width: 120px;
}
</style>
